<template>
  <view id="start">
    <view class="start_content" v-show="!showLoading">
      <header class="start_header">
        <u--image height="2.2rem" width="3.2rem" :src="pic" mode="aspectFit"></u--image>
        <view>用餐人数</view>
      </header>

      <p class="notice">请选择正确的用餐人数</br>
        当前桌号:<span style="color:red">{{uid}}</span>
      </p>

      <view class="content">
        <view class="user_list">
          <li @click="addChangeEnvet" v-for="(item, key) in userList" :key="key" :data-index="key" :class="[key === clIndex ? 'active' : 'noactive']">
            <span>{{ item }}</span>
          </li>
        </view>

        <view class="mark_input">
          <input type="text" v-model="p_mark" placeholder="请输入您的口味要求，忌口等（可不填）" />
        </view>
        <ul class="mark_list">
          <li @click="getMark" v-for="(item, key) in mkList" :data-index="key" :key="key" :class="[key === mkIndex ? 'active' : 'noactive']">
            <span>{{ item }}</span>
          </li>
        </ul>
      </view>
    </view>
    <view v-if="!showLoading" id="start" class="start" @click="addPeopleInfo()">
      <span> 开始点菜 </span>
    </view>
    <u-loading-page :loading="showLoading" loading-text="请扫码点餐"></u-loading-page>
  </view>
</template>


<script>
//引入config
import { addPeopleInfo, showToast } from "@/common/api.js";
export default {
  data() {
    return {
      p_num: "1人",
      p_mark: "",
      api: "",
      userList: [],
      showLoading: true,
      pic: require("static/images/pages/menu/canju.png"),
      clIndex: 0,
      mkIndex: null,
      mkList: ["打包带走", "不放辣椒", "微辣", "不要蒜"],
      pushList: [],
      uid: uni.getStorageSync("roomid"),
    };
  },
  async created() {
    let roomid = uni.getStorageSync("roomid");
    if (roomid) {
      for (var i = 0; i < 8; i++) {
        this.userList.push(i + 1 + "人");
      }
      this.socketOn();
      this.showLoading = false;
    }
  },
  methods: {
    socketOn() {
      let that = this;
      let roomid = uni.getStorageSync("roomid");
      that.$socket.emit('join', { roomid });
    },
    getMark(e) {
      let { index } = e.currentTarget.dataset;
      this.mkIndex = index;
      this.pushList.push(this.mkList[index]);
      this.pushList = this._.uniq(this.pushList);
      this.p_mark = this.pushList.join(",");
      setTimeout(() => {
        this.mkIndex = null;
      }, 1000);
    },
    addChangeEnvet(e) {
      let { index } = e.currentTarget.dataset;
      this.clIndex = index;
      this.p_num = this.userList[index];
    },
    async addPeopleInfo() {
      let params = {
        uid: uni.getStorageSync("roomid"), // 桌号
        p_num: this.p_num, // 用餐人数
        p_mark: this.p_mark, // 备注
      };
      let res = await addPeopleInfo(params);
      if (res.code == 200) {
        uni.$u.route("/pages/orderHome/index");
        this.$socket.emit("addcart", {
          time: +new Date(),
        });
      } else {
        showToast(res.msg);
      }
    },
  },

};
</script>

<style lang="scss">
.start_content {
  ul li {
    list-style: none;
  }

  .start_header {
    height: 3.2rem;
    width: 10rem;
    background: #000;
    color: #fff;
    margin: 2rem auto 0rem auto;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .notice {
    color: #00c7db;
    //
    text-align: center;

    margin: 1rem 0rem;
  }

  .mark_input {
    padding: 1rem;

    input {
      height: 3rem;
      line-height: 3rem;

      width: 100%;
      border: 1px solid #eee;
    }
  }

  .user_list,
  .mark_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;

    li {
      width: 25%;
      padding: 0.5rem;
      box-sizing: border-box;
      /*盒子的宽度=盒子本身宽度    默认 盒子的宽度=盒子的宽度+padding+border*/

      span {
        display: block;
        width: 100%;
        height: 3.2rem;
        line-height: 3.2rem;
        text-align: center;
        background: #fff;
        border-radius: 0.5rem;
        border: 1px solid #ccc;
      }
    }

    li.active {
      span {
        background: #00c7db;
        border: 1px solid #00c7db;
        color: #fff;
      }
    }
  }
}

.start {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  margin-left: -3rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #00c7db;
  color: #fff;

  span {
    display: block;

    width: 2rem;

    margin: 0 auto;

    position: relative;

    top: 1.5rem;
  }
}
</style>